<template>
  <div>
    <el-breadcrumb separator="|">
      <el-breadcrumb-item :to="{ path: '/product/list' }">返回</el-breadcrumb-item>
      <el-breadcrumb-item>产品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" style="margin-top:20px;">
      <el-col :span="4">
        <div class="nav">
          <div class="title">产品类型列表</div>
          <div class="tree">
            <Tree @getTreeData="getTreeData"></Tree>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="wrapper">
          <div class="my-title">{{ title }}商品</div>
          <el-form :model="myForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="所属分类" prop="category">
              <span>{{ myForm?.category }}</span>
            </el-form-item>
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="myForm.title" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="myForm.price" placeholder="请输入商品价格"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="num">
              <el-input v-model="myForm.num" placeholder="请输入商品数量"></el-input>
            </el-form-item>
            <el-form-item label="商品卖点" prop="sellPoint">
              <el-input v-model="myForm.sellPoint" placeholder="请输入商品卖点"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="image">
              <UploadImg :fileList="fileList" @sendImgUrl="sendImgUrl"></UploadImg>
            </el-form-item>
            <el-form-item label="商品描述" prop="descs">
              <!-- <WangEditor></WangEditor> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Tree from './components/Tree'
import { onMounted, reactive, ref, watch } from 'vue'
import WangEditor from './components/WangEditor'
import UploadImg from './components/UploadImg'
import { updateTbItem } from '@/utils/api/product'

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let myForm = reactive({
  id: '',
  title: '',
  num: '',
  price: '',
  sellPoint: '',
  image: [],
  descs: '',
  category: '',
  cid: '',
  isShow: true,
})
let title = ref('')
const fileList = ref([])
onMounted(() => {
  // 浅拷贝，否则失去响应式
  Object.assign(myForm, JSON.parse(route.query.row))
  title.value = route.query.title
  myForm.image = JSON.parse(myForm.image)
  //回片回显---需要一个数组容器装图片 --发送给子组件uploadImg
  let img = [];//fileList=[{name:'',url:''}]
  myForm.image.forEach(ele => {
      let obj = {}
      obj.url = ele
      img.push(obj)
  });
  fileList.value = img;
  console.log(fileList,'filelist');
})
const getTreeData = (data) => {
  myForm.category = data.name
}
const submitForm = () => {
  // 将数组转为字符串
  myForm.image = JSON.stringify(myForm.image)
  updateTbItem(myForm).then(res => {
    if (res.data.status == 200) {
      //跳转路由
      router.push('/product/list')
    }
  })

}
const sendImgUrl = (val) => {
  myForm.image.push(val)

}


</script>
<style lang="scss" scoped>
.nav {
  height: 600px;
  background: #fff;
  border-radius: 2px;

  .title {
    background: skyblue;
    padding: 20px;
    color: #fff;
    text-align: center;
  }

  .tree {
    padding: 20px;
  }

}

.wrapper {
  background: #fff;

  .my-title {
    background: #eee;
    padding: 14px;
    color: #333;
    font-weight: bold;
  }

  .demo-ruleForm {
    padding: 20px;
  }

}
</style>